<template>
  <div>
    <!-- 头部搜索框 -->
    <el-card style="width: 100%">
      车牌号码：<el-input style="width: 300px" placeholder="请输入车牌号码">
      </el-input>
    <div class="select">
      车辆类型：<el-select v-model="value" placeholder="请选择">
        <el-option
        v-for="(item, index) in sizeOption"
        :key="index"
        :label="item.label"
        :value="item.value"
        ></el-option>
      </el-select>
    </div>
      <el-button type="danger" size="large">搜索</el-button>
      <el-button size="large">重置</el-button>
    </el-card>
    <el-card style="width: 100%; margin-top: 30px">
      <el-tabs type="card">
        <el-tab-pane label="全部"></el-tab-pane>
        <el-tab-pane label="可用"></el-tab-pane>
        <el-tab-pane label="停用"></el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 车型列表区域 -->
    <el-card style="margin-top: 30px">
      <el-button type="primary" style="margin-bottom: 20px" @click="addCar"
        >新增车型</el-button
      >
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        border
        v-loading="loading"
      >
        <el-table-column align="center" type="index" label="序号">
        </el-table-column>
        <el-table-column align="center" prop="id" label="车牌编号">
        </el-table-column>
        <el-table-column align="center" prop="name" label="车辆类型">
        </el-table-column>
        <el-table-column align="center" prop="num" label="司机数量">
        </el-table-column>
        <el-table-column
          align="center"
          prop="allowableLoad"
          label="车辆状态"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="allowableVolume"
          label="GPS设备ID"
        >
        </el-table-column>
        <el-table-column align="center" prop="measureLong" label="实载重量(T)">
        </el-table-column>
        <el-table-column align="center" prop="measureWidth" label="实载体积（方）">
        </el-table-column>
        <el-table-column align="center" prop="" label="操作">
          <template #default="{ row }">
            <el-row>
              <el-link style="color: #419eff" @click="editCar(row.id)"
                >编辑</el-link
              >
              |
              <el-link type="danger" @click="delCar(row.id)">删除</el-link>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <el-row style="height: 80px" align="middle" justify="center" type="flex"
        ><el-pagination
          background
          layout="prev,pager,next"
          :page-size="params.pageSize"
          :total="total"
          :current-page="params.page"
          @current-change="changePage"
        />
      </el-row>
    </el-card>
    <!-- 弹层 -->
    <el-dialog @close="close" :visible.sync="showDialog" :title="title">
      <el-form :model="formData" label-width="120px" ref="form" :rules="rules">
        <el-form-item label="车辆类型" prop="name">
          <el-input
            placeholder="请输入车辆类型"
            style="width: 90%"
            v-model="formData.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="应载重量" prop="allowableLoad">
          <el-input
            placeholder="请输入车辆重量"
            style="width: 90%"
            v-model="formData.allowableLoad"
          ></el-input>
        </el-form-item>
        <el-form-item label="应载体积" prop="allowableVolume">
          <el-input
            placeholder="请输入车辆体积"
            style="width: 90%"
            v-model="formData.allowableVolume"
          ></el-input>
        </el-form-item>
        <el-form-item label="长" prop="measureLong">
          <el-input
            placeholder="0.0(米)"
            style="width: 90%"
            v-model="formData.measureLong"
          ></el-input>
        </el-form-item>
        <el-form-item label="宽" prop="measureWidth">
          <el-input
            placeholder="0.0(米)"
            style="width: 90%"
            v-model="formData.measureWidth"
          ></el-input>
        </el-form-item>
        <el-form-item label="高" prop="measureHigh">
          <el-input
            placeholder="0.0(米)"
            style="width: 90%"
            v-model="formData.measureHigh"
          ></el-input>
        </el-form-item>
        <el-row type="flex" justify="center">
          <el-button type="primary" @click="btnOk">确认</el-button>
          <el-button @click="close">取消</el-button>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import {
  addCarApi,
  delCarApi,
  editCarApi,
  getCarDetails,
  getCarListApi,
} from "@/api/car";
import { Message } from "element-ui";
export default {
  name: "modelsPage",
  data() {
    return {
      weightOption: [
        {
          value: "1",
          label: "<1.8(吨)",
        },
        {
          value: "2",
          label: "1.8-6(吨)",
        },
        {
          value: "3",
          label: "6-14(吨)",
        },
        {
          value: "4",
          label: "14-30(吨)",
        },
        {
          value: "5",
          label: "30-50(吨)",
        },
        {
          value: "6",
          label: "50-100(吨)",
        },
        {
          value: "7",
          label: "100>(吨)",
        },
      ],
      sizeOption: [
        {
          value: "1-1",
          label: "<3(立方米)",
        },
        {
          value: "2-1",
          label: "3-5(立方米)",
        },
        {
          value: "3-1",
          label: "5-10(立方米)",
        },
        {
          value: "4-1",
          label: "10-15(立方米)",
        },
        {
          value: "5-1",
          label: "15-30(立方米)",
        },
        {
          value: "6-1",
          label: "30-50(立方米)",
        },
        {
          value: "7-1",
          label: "50-80(立方米)",
        },
      ],
      // 表格数据
      showDialog: false,
      loading: false,
      total: 0,
      tableData: [],
      params: {
        page: 1,
        pageSize: 10,
      },
      // 弹层数据
      formData: {},
      rules: {
        name: [
          {
            required: true,
            message: "请输入车辆类型",
            trigger: "blur",
          },
        ],
        allowableLoad: [
          {
            required: true,
            message: "请输入车型重量",
            trigger: "blur",
          },
        ],
        allowableVolume: [
          {
            required: true,
            message: "请输入车型体积",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getCarList();
  },
  computed: {
    title() {
      return this.formData.id ? "编辑车型" : "新增车型";
    },
  },
  methods: {
    // 获取车辆列表
    async getCarList() {
      this.loading = true;
      const {
        data: { data },
      } = await getCarListApi(this.params);
      console.log(data);
      this.loading = false;
      this.tableData = data.items;
      this.total = +data.counts;
    },
    // 分页
    changePage(page) {
      this.loading = true;
      this.params.page = page;
      // 重新调用方法渲染页面
      this.getCarList();
    },
    // 打开弹层
    addCar() {
      this.showDialog = true;
    },
    // 弹层关闭
    close() {
      this.showDialog = false;
      this.$refs.form.resetFields();
    },
    // 点击确认提交
    async btnOk() {
      await this.$refs.form.validate();
      if (this.formData.id) {
        await editCarApi(this.formData);
        Message.success("编辑车型成功");
      } else {
        await addCarApi(this.formData);
        Message.success("新增车辆成功");
      }
      this.close();
      this.getCarList();
    },
    // 编辑按钮
    async editCar(id) {
      const {
        data: { data },
      } = await getCarDetails(id);
      // console.log(data);
      this.formData = data;
      this.showDialog = true;
    },
    // 删除按钮
    async delCar(id) {
      await this.$confirm("是否确认删除");
      const res = await delCarApi(id);
      console.log(res);
      if (res.data.msg !== "ok") {
        Message.error(res.data.msg);
        return;
      }
      Message.success("删除车型成功");
      this.getCarList();
    },
  },
};
</script>

<style lang="scss" scoped>
.select {
  display: inline-block;
  margin-left: 150px;
  margin-bottom: 40px;
}
</style>
